<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格隔行变色案例</title>
    <style>
        tbody tr {
            height: 30px;
        }
        
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        
        .bg {
            background-color: aqua;
        }
    </style>
</head>

<body>
    <table>
        <thead>
            <tr>
                <th style="width: 15%">Jul 2022</th>
                <th style="width: 15%">Jul 2021</th>
                <th title="Difference compared to last year" style="width: 15%">Change</th>
                <th style="width: 25%" colspan="2">Programming Language</th>
                <th style="width: 15%">Ratings</th>
                <th title="Difference compared to last year" style="width: 15%">Change</th>
            </tr>
        </thead>
        <tbody class="">
            <tr>
                <td>1</td>
                <td>3</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/up.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>Python</td>
                <td>13.44%</td>
                <td>+2.48%</td>
            </tr>
            <tr>
                <td>2</td>
                <td>1</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/down.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>C</td>
                <td>13.13%</td>
                <td>+1.50%</td>
            </tr>
            <tr>
                <td>3</td>
                <td>2</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/down.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>Java</td>
                <td>11.59%</td>
                <td>+0.40%</td>
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
                <td></td>
                <td class="td-top20"></td>
                <td>C++</td>
                <td>10.00%</td>
                <td>+1.98%</td>
            </tr>
            <tr>
                <td>5</td>
                <td>5</td>
                <td></td>
                <td class="td-top20"></td>
                <td>C#</td>
                <td>5.65%</td>
                <td>+0.82%</td>
            </tr>
            <tr>
                <td>6</td>
                <td>6</td>
                <td></td>
                <td class="td-top20"></td>
                <td>Visual Basic</td>
                <td>4.97%</td>
                <td>+0.47%</td>
            </tr>
            <tr>
                <td>7</td>
                <td>7</td>
                <td></td>
                <td class="td-top20"></td>
                <td>JavaScript</td>
                <td>1.78%</td>
                <td>-0.93%</td>
            </tr>
            <tr>
                <td>8</td>
                <td>9</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/up.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>Assembly language</td>
                <td>1.65%</td>
                <td>-0.76%</td>
            </tr>
            <tr>
                <td>9</td>
                <td>10</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/up.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>SQL</td>
                <td>1.64%</td>
                <td>+0.11%</td>
            </tr>
            <tr>
                <td>10</td>
                <td>16</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/upup.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>Swift</td>
                <td>1.27%</td>
                <td>+0.20%</td>
            </tr>
            <tr>
                <td>11</td>
                <td>8</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/down.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>PHP</td>
                <td>1.20%</td>
                <td>-1.38%</td>
            </tr>
            <tr>
                <td>12</td>
                <td>13</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/up.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>Go</td>
                <td>1.14%</td>
                <td>-0.03%</td>
            </tr>
            <tr>
                <td>13</td>
                <td>11</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/down.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>Classic Visual Basic</td>
                <td>1.07%</td>
                <td>-0.32%</td>
            </tr>
            <tr>
                <td>14</td>
                <td>20</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/upup.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>Delphi/Object Pascal</td>
                <td>1.06%</td>
                <td>+0.21%</td>
            </tr>
            <tr>
                <td>15</td>
                <td>17</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/up.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>Ruby</td>
                <td>0.99%</td>
                <td>+0.04%</td>
            </tr>
            <tr>
                <td>16</td>
                <td>21</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/upup.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>Objective-C</td>
                <td>0.94%</td>
                <td>+0.17%</td>
            </tr>
            <tr>
                <td>17</td>
                <td>18</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/up.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>Perl</td>
                <td>0.78%</td>
                <td>-0.12%</td>
            </tr>
            <tr>
                <td>18</td>
                <td>14</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/downdown.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>Fortran</td>
                <td>0.76%</td>
                <td>-0.36%</td>
            </tr>
            <tr>
                <td>19</td>
                <td>12</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/downdown.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>R</td>
                <td>0.76%</td>
                <td>-0.57%</td>
            </tr>
            <tr>
                <td>20</td>
                <td>19</td>
                <td><img src="https://www.tiobe.com/wp-content/themes/tiobe/tpci/images/down.png" alt="change"></td>
                <td class="td-top20"></td>
                <td>MATLAB</td>
                <td>0.73%</td>
                <td>-0.15%</td>
            </tr>
        </tbody>
    </table>

    <script>
        // 案例分析
        // 1.用到新的鼠标事件 鼠标经过 onmouseover 鼠标离开 onmouseout
        // 2.核心思想：鼠标经过 tr 行，当前的行变背景颜色，鼠标离开去掉当前的背景颜色
        // 3.注意：第一行 thead 不用变，因此获取的时 tbody 里面的行 

        // 1.获取元素 tbody 里面所有的行
        var trs = document.querySelector('tbody').querySelectorAll('tr');

        // 2.利用循环绑定注册事件
        for (var i = 0; i < trs.length; i++) {
            // 3. 鼠标经过事件
            trs[i].onmouseover = function() {
                    // console.log(11);
                    this.className = 'bg';
                }
                // 4.鼠标离开事件
            trs[i].onmouseout = function() {
                this.className = '';
            }
        }
    </script>
</body>

</html>